<template>
  <div v-if="visible">
    <el-dialog :visible.sync="visible"
               title="详情"
               :modal="false"
               class="user-dialog"
               width="45%"
               :before-close="closeDialog"
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <div>
        <div>
          <div class="margin-bottom">标签：
            <el-tag class="margin-left-10"
                    v-for="(item,index) of dataForm.label"
                    :key="index">{{item}}</el-tag>
          </div>
          <div class="margin-bottom">标题：{{dataForm.headline}}</div>
          <div class="margin-bottom">副标题：{{dataForm.subheading}}</div>
          <div class="margin-bottom">备注：{{dataForm.remark}}</div>
          <div class="content-box" v-if="dataForm.content !== '' && dataForm.content !== null">
            <div class="margin-bottom"
                 v-html="dataForm.content"></div>
          </div>
          <div>附件：
            <div class="margin-top-10"
                 v-for=" (item,index) of dataForm.rests"
                 :key="index">
              <a :href="getUrl(item.url)"
                 target="_blank"
                 :download="item.name">{{item.name}}</a>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '', // 数据列表接口，API地址
        getDataListIsPage: true, // 数据列表接口，是否需要分页？
        addOrUpdateURL: '', // 添加或修改接口，API地址
        getDataInfoURL: '/tb/information/getInformation?id=', // 数据详情，API地址
        deleteURL: '', // 删除接口，API地址
        deleteIsBatch: true, // 删除接口，是否需要批量？
        exportURL: '' // 导出接口，API地址
      },
      visible: false,
      dataForm: {}
    }
  },
  methods: {
    closeDialog () {
      this.visible = false
    },
    getUrl (url) {
      return `${process.env.VUE_APP_OSS_URL}${url}`
    },
    init (data) {
      this.visible = true
      this.dataForm.id = data
      this.getDataInfo().then(res => {
        if (res.code !== 0) {
          return false
        }
        const str = this.dataForm.label.replace(/[;；]/g, ',')
        this.dataForm.label = (this.dataForm.label === '' || this.dataForm.label === null) ? [] : str.split(',')
        this.dataForm.rests = JSON.parse(this.dataForm.rests)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// ::v-deep img {
//   max-width: 100%;
//   max-height: 100%;
// }
.content-box{
  width: 100%;
  height: 400px;
  overflow: auto;
}
</style>
